<template>
  <div class="main">
    <div class="m-item m-item1">
      <div class="m-i-header">
        <div class="m-i-h-img">
          <img :src="zxPng" alt="咨询人信息" />
        </div>
        <div class="m-i-h-title">咨询人信息</div>
      </div>
      <div class="m-i-cont m-i-cont-person">
        <span class="m-i-cont-bold">{{ wxaRecordsDetail.name }}</span>
        <span>{{ wxaRecordsDetail.sex }}</span>
        <span>{{ wxaRecordsDetail.age }}</span>
      </div>
    </div>
    <div class="m-item">
      <div class="m-i-header">
        <div class="m-i-h-img">
          <img :src="qPng" alt="咨询详情" />
        </div>
        <span class="m-i-h-title">咨询详情</span>
      </div>
      <div class="m-i-cont">
        <div class="m-i-c-item">
          <div class="m-i-c-i-holder">咨询时间</div>
          <div>{{ wxaRecordsDetail.medicrecords[0].createTime }}</div>
        </div>
        <div class="m-i-c-item">
          <div class="m-i-c-i-holder">咨询主题</div>
          <div>{{ wxaRecordsDetail.medicrecords[0].medicRecordSummaryData.mainSuit }}</div>
        </div>
        <div class="m-i-c-item">
          <div class="m-i-c-i-holder">病情描述</div>
          <div>{{ wxaRecordsDetail.medicrecords[0].medicRecordSummaryData.diseaseDescn }}</div>
        </div>
        <div class="m-i-c-item">
          <div class="m-i-c-i-holder">过 敏 史</div>
          <div>{{ wxaRecordsDetail.medicrecords[0].medicRecordSummaryData.allergy }}</div>
        </div>
        <div class="m-i-c-item">
          <div class="m-i-c-i-holder">家 族 史</div>
          <div>{{ wxaRecordsDetail.medicrecords[0].medicRecordSummaryData.famHis }}</div>
        </div>
      </div>
    </div>

    <div class="m-item">
      <div class="m-i-header">
        <div class="m-i-h-img">
          <img :src="aPng" alt="指导建议" />
        </div>
        <span class="m-i-h-title">指导建议</span>
      </div>
      <div class="m-i-cont">
        <div class="m-i-c-item">
          <div class="m-i-c-i-holder">初步判断</div>
          <div>
            {{
              wxaRecordsDetail.medicrecords[0].medicRecordSummaryData.icds
                .map((item) => {
                  return item.title;
                })
                .join(',') || ''
            }}
          </div>
        </div>
      </div>
    </div>
    <div class="m-item">
      <div class="m-i-header">
        <div class="m-i-h-img">
          <img :src="yPng" alt="用药指导" />
        </div>
        <span class="m-i-h-title">用药指导</span>
      </div>
      <div class="m-i-cont m-i-cont-drug">
        <div
          v-for="(advise, index) in wxaRecordsDetail.medicrecords[0].medicRecordSummaryData.medications"
          :key="index"
          class="m-i-cont-advise"
        >
          <div class="drug-name">{{ advise.name || '' }}</div>
          <div class="drug-remark">
            {{ advise.remark || '' }}
          </div>
          <div class="drug-dose">
            <span class="drug-spec">{{ advise.spec }}</span>
            <span v-if="advise.count" class="drug-count">{{ 'x' + advise.count }}</span>
          </div>
        </div>
      </div>
    </div>
    <div class="m-item">
      <div class="m-i-header">
        <div class="m-i-h-img">
          <img :src="doPng" alt="指导医生" />
        </div>
        <span class="m-i-h-title">指导医生</span>
      </div>
      <div class="m-i-cont">
        <div class="m-i-c-item">
          <div class="m-i-c-i-holder">医生姓名</div>
          <div>{{ wxaRecordsDetail.medicrecords[0].medicRecordSummaryData.medicRecordDoctorData.name }}</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
// import { getWxaRecords } from '@/api/service';
import { mapGetters } from 'vuex';
import zxPng from '@/static/wxrecord/zx.png';
import qPng from '@/static/wxrecord/q.png';
import aPng from '@/static/wxrecord/a.png';
import yPng from '@/static/wxrecord/y.png';
import doPng from '@/static/wxrecord/do.png';
export default {
  data() {
    return {
      zxPng,
      qPng,
      aPng,
      yPng,
      doPng,
      recordIndex: ''
    };
  },
  onLoad() {
    console.log('this.wxaRecordsDetail:', this.wxaRecordsDetail);
    if (!this.wxaRecordsDetail) {
      uni.showModal({
        title: '提示',
        content: '参数错误，请重新从记录列表中进入',
        confirmText: '确定',
        complete: () => {
          uni.navigateTo({
            url: '/pages/service/askDoctorHistory'
          });
        }
      });
    }
  },
  computed: {
    ...mapGetters(['wxaRecordsDetail'])
  },
  methods: {}
};
</script>
<style lang="scss" scoped>
.main {
  width: 100%;
  padding-bottom: 48rpx;
  .m-item {
    width: 700rpx;
    background: #ffffff;
    border-radius: 16rpx;
    padding: 20rpx 24rpx;
    box-sizing: border-box;
    margin: auto;
    margin-top: 24rpx;
    .m-i-header {
      display: flex;
      align-items: center;
      border-bottom: 1px solid #e8e8e8;
      padding-bottom: 24rpx;
      flex-shrink: 0;

      .m-i-h-img {
        width: 48rpx;
        height: 48rpx;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .m-i-h-title {
        margin-left: 12rpx;
        font-size: 40rpx;
        font-family: Noto Sans S Chinese;
        font-weight: bold;
        line-height: 34px;
        color: rgba(0, 0, 0, 0.9);
      }
    }
    .m-i-cont {
      padding: 48rpx 0rpx 0rpx;
      color: rgba(0, 0, 0, 0.7);
      .m-i-cont-bold {
        color: rgba(0, 0, 0, 0.9);
      }
      &.m-i-cont-person {
        width: 60%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-bottom: 40rpx;
      }
      &.m-i-cont-drug {
        padding-bottom: 40rpx;
      }
      .m-i-c-item {
        display: flex;
        margin-bottom: 40rpx;
        .m-i-c-i-holder {
          color: #999;
          display: inline-block;
          width: 160rpx;
          margin-right: 40rpx;
          flex-shrink: 0;
        }
      }
      .m-i-cont-advise {
        .drug-name {
          font-size: 32rpx;
          color: rgba(5, 3, 3, 0.7);
        }
        .drug-remark {
          margin-top: 24rpx;
          font-size: 28rpx;
          color: #999999;
        }
        .drug-dose {
          background: #eeeeee;
          border-radius: 4rpx;
          padding: 10rpx 16rpx;
          margin-top: 24rpx;
          display: inline-block;
          .drug-spec {
          }
          .drug-count {
            margin-left: 16rpx;
          }
        }
      }
    }
  }
}
</style>
